{% extends '../common/layout.html' %}
{% block title %} index {% endblock %}
{% block head %}
<link rel="stylesheet" href="/css/adddepartment.css">
{% endblock %}
{% block content %}
<div>
  <div>
    <table class="layui-table L-O" lay-skin="line">
      <thead>
      <tr>
        <th>
          <div class="layui-bodyone" id="one">
            <form class="layui-form L-B" action="">
              <div class="layui-inline">
                <label class="layui-form-label L-B">部门选择</label>
                <div class="layui-input-inline">
                  <select name="quiz1">
                    <option value=""selected="">请选择部门</option>
                    <option value="技术">开发部</option>
                    <option value="人事">人事部</option>
                    <option value="财务">财务部</option>
                  </select>
                </div>
              </div>
              <div class="layui-inline">
                <label class="layui-form-label">创建日期</label>
                <div class="layui-input-inline">
                  <input type="text" name="date" id="date" lay-verify="date" placeholder="YYYY-MM-dd"
                         autocomplete="off" class="layui-input">
                </div>
              </div>
              <div class="layui-inline">
                <div class="layui-inline-item">
                  <button class="uery S-L">搜索</button>
                </div>
              </div>
            </form>
          </div>
        </th>
      </tr>
      </thead>
      <thead>
      <tr>
        <th>
          <div class="layui-bodytwo" id="two">
            <div class="site-demo-button"id="layerDemo">
              <button class="layui-btnt"data-method="notice">
                <i class="zl zlIcon-tianjia"></i>&nbsp;&nbsp;添加部门</button>
            </div>
          </div>
        </th>
      </tr>
      </thead>
    </table>
    <div class="layui-bodythree" id="three">
      <div>
        <table class="layui-hide T-B" id="test" lay-filter="demo" lay-skin="line"></table>
        <script type="text/html" id="barDemo">
          <a class="layui-btn C-S" lay-event="detail">查看</a>
          <a class="layui-btn C-S" lay-event="edit">编辑</a>
          <a class="layui-btn C-S " lay-event="del">删除</a>
        </script>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block js %}
<script id="addSpringWindow" type="text/html">
  <div class="layui-table-T">
    <div class="layui-table-T L-T-B">
      <h1><b>添加部门</b></h1>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">部门名称</label>
      <div class="layui-input-inline">
        <input class="time-T"name="quiz1">
        </input>
      </div>
    </div>
    <div class="layui-inline">
      <label class="layui-form-label">创建时间</label>
      <div class="layui-input-inline">
        <input class="time-T" type="date">
      </div>
    </div>
  </div>
</script>
<script>
    layui.use(['jquery','layer','form','table','laydate'], function(){ //独立版的layer无需执行这一句
        var $ = layui.jquery, layer = layui.layer; //独立版的layer无需执行这一句
        var $ = layui.jquery,
            layer = layui.layer,
            form = layui.form,
            table = layui.table,
            laydate=layui.laydate;
        //触发事件
        var active = {
            setTop: function(){
                var that = this;
                //多窗口模式，层叠置顶
            }
            ,notice: function(){
                //示范一个公告层
                layer.open({
                    type: 1
                    ,title: false //不显示标题栏
                    ,closeBtn: false
                    ,area:['300px','200px']
                    ,shade: 0.8
                    ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
                    ,btn: ['确认', '取消']
                    ,btnAlign: 'c'
                    ,moveType: 1 //拖拽模式，0或者1
                    ,content:addSpringWindow.innerHTML
                    ,success: function(layero){
                        var btn = layero.find('.layui-layer-btn');
                        btn.find('.layui-layer-btn0').attr({
                            href: ''
                            ,target: '_blank'
                        });
                        layero.find(".layui-layer-btn0").addClass("B-T-N");
                    },
                });
            }
            ,laydate: function () {
                var d = new Date();
                document.write(d.getFullYear() + '-');
                document.write(d.getUTCMonth() + 1 + '-');
                document.write(d.getDate());
                //默认显示
                laydate.render({
                    elem: '#time-T'
                    ,show: true //直接显示
                });
            }
        };
        $('#layerDemo .layui-btnt').on('click', function(){
            var othis = $(this), method = othis.data('method');
            active[method] ? active[method].call(this, othis) : '';
        });
    });
</script>
<script>
    layui.use(['form', 'layedit', 'laydate'], function(){
        var form = layui.form
            ,layer = layui.layer
            ,layedit = layui.layedit
            ,laydate = layui.laydate;

        //日期
        laydate.render({
            elem: '#date'
        });
        laydate.render({
            elem: '#date1'
        });
    });
</script>
<script>
    layui.use(['laypage', 'layer'], function(){
        var laypage = layui.laypage
            ,layer = layui.layer;
        //完整功能
        laypage.render({
            elem: 'demo7'
            ,count: 100
            ,layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
            ,jump: function(obj){
                console.log(obj)
            }
        });
    });
</script>
<script>
    layui.use('table', function(){
        var table = layui.table;

        table.render({
            elem: '#test'
            ,height: 332
            ,url:'/demo/table/user/'//数据接口
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,cols: [[
                {field:'checkbox',type:'checkbox'}
                ,{field:'id', title: '序号'}
                ,{field:'department', title: '部门'}
                ,{field:'accountStatus',title: '创建时间'}
                ,{field:'details',title: '操作'}
            ]]
        });
        //监听表格复选框选择
        table.on('checkbox(demo)', function(obj){
            console.log(obj)
        });
        //监听工具条
        table.on('tool(demo)', function (obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                , layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent === 'detail') {
                layer.msg('查看操作');
            } else if (layEvent === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    obj.del(); //删除对应行（tr）的DOM结构
                    layer.close(index);
                    //向服务端发送删除指令
                });
            } else if (layEvent === 'edit') {
                layer.msg('编辑操作');
            }
        });
    });
</script>
<script>
    layui.use(['jquery','element'] , function () {
        var $ = layui.jquery;
        setCookie("name","hayden","s20");
        $.get('/api/test?name=13616197695' , function (data) {
            console.log(data);
        })
    })
    function getsec(str) {
        var str1=str.substring(1,str.length)*1;
        var str2=str.substring(0,1);
        if (str2=="s")
        {
            return str1*1000;
        }
        else if (str2=="h")
        {
            return str1*60*60*1000;
        }
        else if (str2=="d")
        {
            return str1*24*60*60*1000;
        }
    }
    function setCookie(name,value,time) {
        var strsec = getsec(time);
        var exp = new Date();
        exp.setTime(exp.getTime() + strsec*1);
        document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
    }
</script>
{% endblock %}